<#assign ctx=request.contextPath/>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>登入</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctx}/static/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="${ctx}/static/layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="${ctx}/static/layuiadmin/style/login.css" media="all">
  <style>
    .rightValidate { width: 280px;
      /*margin: 0px auto; */
      position: relative; line-height: 30px; height: 30px; text-align: center; z-index: 99; margin-top:0px; margin-bottom: 8px;}
    .v_rightBtn { position: absolute; left: 0; top: 0; height: 31px; width: 40px; background: #ddd; cursor: pointer; }
    .imgBtn{ width:44px; height: 171px; position: absolute; left: 0;  }
    .imgBtn img{ z-index:99; align:center;}
    .imgBg{ position:absolute;bottom:35px;width: 280px; height: 171px;  display:none;z-index:9;}
    .imgBg_2{ position:absolute; bottom: -80px;  bottom:35px; width: 150px; height: 60px;   display:block;z-index:9;}
    .imgBg_3{ position:absolute;  bottom: -80px; bottom:35px; width: 170px; height: 60px;   display:block;z-index:9;}
    .hkinnerWrap{ border: 1px solid #eee; z-index:9999}
    .green{ border-color:#34C6C2 !important; }
    .green .v_rightBtn{ background: #34C6C2; color: #fff; }
    .red{ border-color:red !important; }
    .red .v_rightBtn{ background: red; color: #fff; }
    .refresh{ position: absolute; width: 30px; height: 30px; right: 4px; top: 4px; font-size: 12px; color: #fff; text-shadow: 0px 0px 9px #333; cursor: pointer; display: none; }
    .notSel{ user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; }
  </style>
  <style type="text/css">
    #body{
      background: no-repeat;
      background-size: cover;
      min-height: 100vh;
    }
  </style>
</head>
<body id="body">

<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
  <input type="hidden" id="check" name="check" value="0">

  <div class="layadmin-user-login-main">
    <div class="layadmin-user-login-box layadmin-user-login-header">
      <h2>SparkPay后台管理系统</h2>
      <p>管理员</p>
    </div>
    <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
      <div class="layui-form-item" style="margin-left: 21px;">
        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
        <input type="text" name="nickname" style="width: 280px" id="LAY-user-login-nickname" lay-verify="required" placeholder="用户名" class="layui-input">
      </div>
      <div class="layui-form-item" style="margin-left: 21px;">
        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
        <input type="password" name="password" style="width: 280px" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
      </div>

      <div class="comImageValidate rightValidate" style="margin-left: 21px; margin-top: 194px;">

        <!--<div class="imgBg_2"></div>-->
        <!--<div class="imgBg_3"></div>-->
        <!--<div style = "width: 100%; height: 30px;"></div>-->
        <div class="imgBg" style="display: block">
          <div class="imgBtn" style="display: block">
            <img alt="" src="">
          </div>
          <span class="refresh" style="display: block" >
	        	<img alt="" src="">
	        </span>
        </div>

        <div class="hkinnerWrap" style="height:30px; position: relative;">
          <span  class="v_rightBtn "><em  id="notSel" class="notSel">→</em></span>
          <span class="huakuai"  style="font-size: 12px;line-height: 33px;color: #A9A9A9;">向右滑动滑块填充拼图完成验证</span>
          <input type = "hidden" name="validX"/>
        </div>
      </div>



      <!--<div class="layui-form-item" style="margin-bottom: 20px;">-->
      <!--<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">-->
      <!--<a href="forget.html" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>-->
      <!--</div>-->



      <div class="layui-form-item" style="width: 280px; margin-left: 21px;">
        <button class="layui-btn layui-btn-fluid" id="login">登 入</button>
      </div>
      <div class="layui-trans layui-form-item layadmin-user-login-other">
        <!--           <label>社交账号登入</label> -->
        <!--           <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a> -->
        <!--           <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a> -->
        <!--           <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a> -->

        <!--           <a href="reg.html" class="layadmin-user-jump-change layadmin-link">注册帐号</a> -->
      </div>
    </div>
  </div>

  <div class="layui-trans layadmin-user-login-footer">

  </div>

  <!--<div class="ladmin-user-login-theme">
    <script type="text/html" template>
      <ul>
        <li data-theme=""><img src="{{ layui.setter.base }}style/res/bg-none.jpg"></li>
        <li data-theme="#03152A" style="background-color: #03152A;"></li>
        <li data-theme="#2E241B" style="background-color: #2E241B;"></li>
        <li data-theme="#50314F" style="background-color: #50314F;"></li>
        <li data-theme="#344058" style="background-color: #344058;"></li>
        <li data-theme="#20222A" style="background-color: #20222A;"></li>
      </ul>
    </script>
  </div>-->

</div>




<script src="${ctx}/static/jquery/jquery.min.js"></script>
<script src="${ctx}/static/layuiadmin/layui/layui.js"></script>
<!--<script src="${ctx}/static/js/layer.js"></script>-->
<script type="text/javascript">
  var c = document.getElementById("c");
  var ctx = c.getContext("2d");

  //making the canvas full screen
  c.height = window.innerHeight;
  c.width = window.innerWidth;

  //chinese characters - taken from the unicode charset
  var chinese = "17素材网";
  //converting the string into an array of single characters
  chinese = chinese.split("");

  var font_size = 10;
  var columns = c.width / font_size; //number of columns for the rain
  //an array of drops - one per column
  var drops = [];
  //x below is the x coordinate
  //1 = y co-ordinate of the drop(same for every drop initially)
  for (var x = 0; x < columns; x++)
    drops[x] = 1;

  //drawing the characters
  function draw() {
    //Black BG for the canvas
    //translucent BG to show trail
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.fillStyle = "#0F0"; //green text
    ctx.font = font_size + "px arial";
    //looping over drops
    for (var i = 0; i < drops.length; i++) {
      //a random chinese character to print
      var text = chinese[Math.floor(Math.random() * chinese.length)];
      //x = i*font_size, y = value of drops[i]*font_size
      ctx.fillText(text, i * font_size, drops[i] * font_size);

      //sending the drop back to the top randomly after it has crossed the screen
      //adding a randomness to the reset to make the drops scattered on the Y axis
      if (drops[i] * font_size > c.height && Math.random() > 0.975)
        drops[i] = 0;

      //incrementing Y coordinate
      drops[i]++;
    }
  }

  setInterval(draw, 50);
</script>
<script>
    var ctx ="${ctx}";
    var tokenId = "";
    var y = "";
    var x = "";
    $(".comImageValidate").ready(function () {
        validateImageInit();
        $(".refresh").click(function () {
            validateImageInit();
        })
        $(".hkinnerWrap").mouseover(function(){
            $(".imgBg").css("display","block");
            $(".refresh").css("display","block");
        }).mouseleave(function () {
//            $(".imgBg").css("display","none");
//            $(".refresh").css("display","none");
        });

        $(".imgBg").mouseover(function(){
            $(".imgBg").css("display","block");
            $(".refresh").css("display","block");
        }).mouseleave(function () {
//            $(".imgBg").css("display","none");
//            $(".refresh").css("display","none");
        });

        $('.v_rightBtn').on({
            mousedown: function(e) {
//                layer.msg("点击拖动 windows");
//                console.log(e);
                var password=$('#LAY-user-login-password').val();
                var nickname=$('#LAY-user-login-nickname').val();
                $(".huakuai").html("");
                $(".hkinnerWrap").removeClass("red green")
                var el = $(this);
                var os = el.offset();

                dx = e.pageX - os.left;
                //$(document)
                $(this).parents(".hkinnerWrap").off('mousemove');
                $(this).parents(".hkinnerWrap").on('mousemove', function(e) {
//                    layer.msg("开始拖动 windows");
//                    console.log(e);
                    var newLeft=e.pageX - dx;
                    el.offset({
                        left: newLeft
                    });
                    var newL=parseInt($(".v_rightBtn").css("left"));
                    if(newL<=0){
                        newL=0;
                    }else if (newL>=242){
                        newL=242;
                    }
                    $(".v_rightBtn").css("left",newL+"px");
                    $(".imgBtn").offset({
                        left: newLeft
                    });
                    $(".imgBtn").css("left",newL+"px")
                }).on('mouseup', function(e) {
                    //$(document)
                    $(this).off('mousemove');
                })




            }
        }).on("mouseup",function () {
            $(this).parents(".hkinnerWrap").off('mousemove');
            var l=$(this).css("left");
            if(l.indexOf("px")!=-1){
                l=l.substring(0,l.length-2);
            }
            x = l;
            submitDate(l,y,tokenId)

        }).on("touchstart",function (e) {
//            layer.msg("点击拖动");
            console.log(e);
            var password=$('#LAY-user-login-password').val();
            var nickname=$('#LAY-user-login-nickname').val();
            $(".huakuai").html("");
            $(".hkinnerWrap").removeClass("red green")
            var el = $(this);
            var os = el.offset();
            dx = e.originalEvent.touches[0].pageX - os.left;
            //$(document)
            $(this).parents(".hkinnerWrap").off('touchmove');
            $(this).parents(".hkinnerWrap").on('touchmove', function(e) {
//                layer.msg("正在拖动");
//                console.log(e);
                var newLeft=e.originalEvent.touches[0].pageX - dx;
                el.offset({
                    left: newLeft
                });
                var newL=parseInt($(".v_rightBtn").css("left"));
                if(newL<=0){
                    newL=0;
                }else if (newL>=242){
                    newL=242;
                }
                $(".v_rightBtn").css("left",newL+"px");
                $(".imgBtn").offset({
                    left: newLeft
                });
                $(".imgBtn").css("left",newL+"px")
            }).on('touchend', function(e) {
                //$(document)
                $(this).off('touchmove');
            })
        }).on("touchend",function () {
            $(this).parents(".hkinnerWrap").off('touchmove');
            var l=$(this).css("left");
            if(l.indexOf("px")!=-1){
                l=l.substring(0,l.length-2);
            }
            x = l;
            submitDate(l,y,tokenId)
        })

    });
    /*图形验证*/
    function submitDate(x,y,tokenId) {

        $.ajax({
            url: ctx + "/captcha/check/verification/result?x="+ x +"&y="+y,
            dataType:'json',
            type: "POST",
            success:function (data) {
                if(data.code==1){
                    $(".hkinnerWrap").addClass("green").removeClass("red");
                    $(".hkinnerWrap input[name='validX']").val(x);
                    $("#x").val(x);
                    $("#y").val(y);

                    $("#check").val("1");

//                      $("#notSel").text("正确");

                    console.log("验证成功");
                    layer.msg("验证成功")
                } else {
                    $(".hkinnerWrap").addClass("red").removeClass("green");
                    console.log("取消");

                    $("#check").val("0");

                    setTimeout(function(){
                        $(".hkinnerWrap").removeClass("red green");
                        $(".v_rightBtn").css("left",0);
                        $(".imgBtn").css("left",0);
                    },280)
                    validateImageInit();
                }
            }
        })
    }

    var forumId=GetQueryString("type" );
    //url参数
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)" + name +"=([^&]*)(&|$)" );
        var r = window.location.search.substr(1).match(reg);

        if(r!=null )
            return  unescape(r[2]);
        return null;

    }


    /*获取验证码*/
    function validateImageInit() {
        var url = ctx +  "/captcha/get/verification/image?type=slide";
//          var parm = GetQueryString("type");
//          if (parm != null) {
//              url += "?type=" + ;
//          }
        console.log(url);
        $.ajax({
            url: url,
            dataType:'json',
            cache:false,
            type: "get",
            success:function (data) {
                var type = data.type;
                console.log(type);
                switch (type) {
                    case "operation" : initOperationVerificationCode(data); break;
                    case "char" : initCharVerificationCode(data); break;
                    case "slide" : initSlideVerificationCode(data); break;
                    default : console.log("验证码错误"); break;
                }
            },error:function(err){
                validateImageInit();
            }
        })
    }

    function initOperationVerificationCode(data) {
        $(".imgBg_3").css("background",'#fff url("data:image/jpg;base64,'+data.operationImage+'")');
    }

    function initSlideVerificationCode(data) {
        y = data.y;
        $(".huakuai").html("向右滑动滑块填充拼图");
        $(".imgBg").css("background",'#fff url("data:image/jpg;base64,'+data.shadeImage+'")');
        $(".imgBtn").css('top', y+ "px");
        $(".imgBtn").find("img").attr("src","data:image/png;base64,"+data.cutoutImage)
        $(".hkinnerWrap").removeClass("red green");
        $(".v_rightBtn").css("left",0);
        $(".imgBtn").css("left",0);
    }

    function initCharVerificationCode(data) {
        $(".imgBg_2").css("background",'#fff url("data:image/jpg;base64,'+data.charImage+'")');
        $(".imgBg_3").css("none");
    }

</script>
<!--<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>-->
<script>
    var ctx ="${ctx}";
    var url = ctx + "/static/image/bg.jpg";
    console.log(ctx);
    //   $("#body").css("background-image","url(" + url + ")");
    layui.config({
        base: ctx + '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'user'], function(){
        var $ = layui.$
            ,setter = layui.setter
            ,admin = layui.admin
            ,form = layui.form
            ,router = layui.router()
            ,search = router.search;


    });

    $("#login").click(function(){
        if($('#check').val()==1){
            $.ajax({
                url: ctx + "/user/login",
                type: "post",
                data: {"nickname":$("#LAY-user-login-nickname").val(),"password":$("#LAY-user-login-password").val()},
                success:function(result) {
                  var name = $('#LAY-user-login-nickname').val();
                  var pwd= $('#LAY-user-login-password').val();
                    if(result.code == 1) {
                        location.href = '../index.html'; //后台主页
                    }
                    else if (result.code==-1){
                        sessionStorage.setItem("nickname", name);
                        sessionStorage.setItem("password", pwd);
                      location.href = ctx + "/bgManage/login";
                    } else {
                        layer.msg(result.msg);
                    }
                }

            })
        }else{
            layer.msg("请先拖动验证");
        }

    });
</script>
</body>
</html>